<template>
	<view class="post-info-container">
		<view class="post-info">
			<view class="common-head">
				<view class="company-name">
					<text class="name-text ellipsis">{{ detail.compName }}</text>
					<text class="company-scale">{{ detail.compAddr }}·{{ detail.compType }} </text>
					<text class="company-scale">{{ detail.compScale }}·{{ detail.compIndustry }}</text>
				</view>
				<view class="company-name">
					<image class="company-img" :src="api_host + detail.compLogo"></image>
				</view>
			</view>
			<view class="post-desc">
				<text class="name-text">企业介绍</text>
				<u-parse :content="detail.compBlurb" :tagStyle="style"></u-parse>
			</view>
			<view class="post-detail" v-if="detail.compWebsite">
				<text class="name-text">企业介绍</text>
				<view class="detail">
					<uni-section title="企业官网" type="line" padding>
						企业官网：<uni-link :href="detail.compWebsite" :text="detail.compWebsite" color="#007BFF"></uni-link>
					</uni-section>
				</view>
				
			</view>
		</view>
		<view class="company-info">
			<text class="name-text">企业地址</text>
			<view class="map-address">
				<!-- 地图组件 -->
				<!-- <v-map></v-map> -->
				<map 
				  id="map"
				  :longitude="longitude" 
				  :latitude="latitude" 
				  scale="14"
				  :markers="markers"
				  show-location
				  @callouttap="callouttap"
				  style="width: 100%;height: 400rpx;;border-radius: 24rpx;overflow: hidden;"
				>
				  <cover-view slot="callout">
				  	<cover-view class="custom-callout" :marker-id="markers[0].id">
						<cover-view class="callout-title">工作地点</cover-view>
						<cover-view class="callout-content ellipsis">{{ detail.compAddr }}</cover-view>
					</cover-view>
				  </cover-view>
				</map>
			</view>
		</view>
		<view class="post-footer" v-if="jobOpeningNum">
			<view @tap="handleViewPost"	>
				<text>在招岗位</text>
				<text class="count">{{ jobOpeningNum }}</text>
				<text>个</text>
			</view>
		</view>
		<!-- 在招岗位 -->
		<view class="popup-container">
			<popup-layer ref="popupRef" direction="top">
				<view class="popup-header">
					<text>在招岗位</text>
					<text class="count">{{ jobOpeningNum }}</text>
					<text>个</text>
				</view>
				<!-- <view class="filter-box">
					<view class="filter-item" >
						<picker :value="experIndex" :range="experiences"  @change="bindPickerChange">
							<text v-if="experIndex >= 0">{{experiences[experIndex]}}</text>
							<text v-else>工作经验</text>
						</picker>
					</view>
					<view class="filter-item">
						<picker :value="educationIndex" :range="educationList"  @change="bindPickerChange">
							<text v-if="educationIndex >= 0">{{educationList[educationIndex]}}</text>
							<text v-else>学历要求</text>
						</picker>
					</view>
					<view class="filter-item">
						<text>薪资要求</text>
					</view>
				</view> -->
				<view class="common-list">
					<view class="common-item" v-for="item in detail.companyStations" :key="item.id" @tap="nologinJump(`/subpage/talentemployment/employment/postinfo?id=${item.id}`)">
						<view class="common-name">
							<text class="name-text">{{ item.stationName }}</text>
							<text class="text-color" v-if="item.salaryRange !== '面议'">{{ item.salaryRange }}元</text>
							<text class="text-color" v-else>面议</text>
						</view>
						<view class="common-label">
							<text>{{ item.stationEdu }}</text>
							<text>{{ item.stationLesson }}</text>
							<text>招{{ item.recruitsNumber }}人</text>
						</view>
						<view class="common-footer">
							<text class="foot-text">{{ detail.compName }}</text>
							<text class="foot-address">{{ item.stationAddr }}</text>
						</view>
					</view>
				</view>
			</popup-layer>
		</view>
	</view>
</template>

<script>
	import { companyInfo } from '@/common/api_employment.js'
	import map from '@/components/map/index.vue'
	import popupLayer from '@/components/popupLayer/index.vue'
	export default {
		components: {
			map: 'v-map',
			popupLayer
		},
		data() {
			return {
				experIndex: -1,
				educationIndex: -1,
				experiences: ['1年', '2年', '3年'],
				educationList: ['本科', '专科科'],
				longitude: '',
				latitude: '',
				showMap: false,
				markers: [{
					id: 0,
					latitude: '',
					longitude: '',
					width: 24,
					height: 24,
					iconPath: 'https://hxs.dsjhs.com:553/prod-api/profile/weizhi-icon.png',
					customCallout: {
					  anchorY: 0,
					  anchorX: 0,
					  display: 'ALWAYS'
					}
				}],
				detail: {},
				style: {
					p: 'font-size: 13px;color: #34314F;line-height: 22px;',
					img: 'display:-webkit-box;width:100% !important;'
				},
				type: ''
			}
		},
		computed: {
			jobOpeningNum() {
				return this.detail.companyStations?.length
			}
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: `/subpage/talentemployment/employment/companyinfo?id=${this.detail.id}`,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onShow() {
			// const token = uni.getStorageSync('token')
			// console.log(token, 'this.hasLogin');
			// if (!this.hasLogin) {
			// 	this.toLogin()
			// 	return false
			// }
		},
		onLoad(option) {
			this.type = option.type
			this.careerId = option.careerId
			this.getCompanyInfo(option.id, this.type = '0', this.careerId = '')
		},
		methods: {
			handleViewPost() {
				// this.boolShow = true
				this.$refs.popupRef.show() 
				console.log(this.$refs.popupRef, 'this.$refs.popup')
				// this.$refs.popup.open()
			},
			toLogin() {
				uni.showModal({
					title:'提示',
					content:'请先完成登录',
					showCancel: false,
					confirmText:'去登录',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/me/mobile_login'
							})
						}
					}
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			// 导航
			callouttap() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: this.detail.compName,
					address: this.detail.compAddr
				})
			},
			async getCompanyInfo(id, type, careerId) {
				
				const postData = await companyInfo({id, type, careerId})
				if(postData.code === 200) {
					this.detail = postData.data
					const { longitude, latitude } = postData.data
					this.longitude = Number(longitude)
					this.latitude = Number(latitude)
					this.markers[0].longitude = Number(longitude)
					this.markers[0].latitude = Number(latitude)
					this.showMap = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-info-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 24rpx 32rpx 180rpx 32rpx;
		background-color: #F2F5FF;
		box-sizing: border-box;
		.post-info {
			width: 100%;
			padding: 40rpx 32rpx 36rpx;
			border-radius: 40rpx;
			margin-bottom: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			.common-head {
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				padding-bottom: 20rpx;
				margin-bottom: 28rpx;
				border-bottom: 1px solid rgba(52, 49, 79, 0.08);
			}
			.common-name {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				
				.text-color {
					font-weight: 500;
					font-size: 32rpx;
					color: #FF7F1C;
					line-height: 22px;
				}
			}
			.post-other-info {
				display: flex;
				text {
					margin-right: 48rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(52, 49, 79, 0.7);
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.post-desc {
				margin-bottom: 36rpx;
			}
			.post-detail {
				.detail {
					font-weight: 400;
					font-size: 26rpx;
					color: #34314F;
					line-height: 44rpx;
					text-align: left;
				}
			}
		}
		.company-info {
			width: 100%;
			padding: 28rpx 32rpx 32rpx;
			border-radius: 40rpx;
			margin-bottom: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			.name-text {
				margin-bottom: 16rpx;
				
			}
			.company-name {
				display: flex;
				flex-wrap: nowrap;
				
				.company-desc {
					position: relative;
					flex: auto;
					padding-top: 26rpx;
					text {
						display: block;
					}
					.name {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						text-align: left;
						font-style: normal;
						margin-bottom: 8rpx;
						
					}
					.scale {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 16px;
						text-align: left;
						font-style: normal;
					}
					.right-arrow {
						position: absolute;
						top: 50%;
						right: -18rpx;
						display: block;
						width: 32rpx;
						height: 32rpx;
						transform: translateY(-50%);
						background: url('@/static/images/index/right-arrow.png') no-repeat center;
						background-size: 100% 100%;
					}
				}
			}
			.map-address {
				height: 400rpx;
				border-radius: 24rpx;
				overflow: hidden;
				margin-top: 20rpx;
				
			}
		}
		.name-text {
			display: block;
			margin-bottom: 20rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 22px;
		}
		.company-scale {
			display: block;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(52, 49, 79, 0.7);
			line-height: 36rpx;
			text-align: left;
		}
		.company-img {
			width: 176rpx;
			height: 132rpx;
			margin-right: 16rpx;
			border-radius: 24rpx;
		}
		.ellipsis {
			white-space: nowrap; /* 不换行 */
			overflow: hidden; /* 隐藏超出的内容 */
			text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
			max-width: 420rpx; /* 设置最大宽度以限制文本的显示长度 */
		}
		.desc {
			font-weight: 400;
			font-size: 26rpx;
			color: #34314F;
			line-height: 44rpx;
			text-align: left;
		}
		.post-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 172rpx;
			padding: 48rpx 32rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20px 20px 0px 0px;
			
			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #34314F;
				line-height: 44rpx;
				text-align: left;
			}
			.count {
				color: #FF7F1C;
			}
		}
		.popup-container {
			margin-left: -32rpx;
			/deep/.popup-content {
				width: 100%;
				min-height: 400px;
				max-height: 600px;
				border-radius: 20px;
				padding: 48rpx 32rpx 30rpx;
				box-sizing: border-box;
				background: #F2F5FF;
				overflow-y: auto;
				
				.popup-header {
					margin-bottom: 32rpx;
					text {
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
					}
					.count {
						color: #FF7F1C;
					}
				}
				.filter-box {
					display: flex;
					flex-wrap: nowrap;
					margin-bottom: 24rpx;
					justify-content: space-between;
					.filter-item {
						position: relative;
						width: 200rpx;
						height: 64rpx;
						padding: 12rpx 20rpx 12rpx 32rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						box-sizing: border-box;
						font-weight: 500;
						font-size: 28rpx;
						color: rgba(52, 49, 79, 0.7);
						text-align: left;
						&::after {
							position: absolute;
							top: 16rpx;
							right: 20rpx;
							display: block;
							width: 32rpx;
							height: 32rpx;
							background: url('https://hxs.dsjhs.com:553/prod-api/profile/down-arrow.png') no-repeat center;
							background-size: 100% 100%;
							content: '';
						}
					}
				}
				.popup-item {
					margin-bottom: 48rpx;
					
					
					
				}
			}
			
		}
		
		.common-list {
			box-sizing: border-box;
			.common-item {
				width: 100%;
				padding: 28rpx 32rpx 32rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 40rpx;
				.common-name {
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					.name-text {
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 22px;
					}
					.text-color {
						font-weight: 500;
						font-size: 32rpx;
						color: #FF7F1C;
						line-height: 22px;
					}
				}
				.common-label {
					display: flex;
					flex-wrap: nowrap;
					margin-bottom: 24rpx;
					text {
						display: block;
						margin-right: 16rpx;
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						color: #34314F;
						line-height: 32rpx;
						border-radius: 8rpx;
						background-color: #F4F4F4;
						box-sizing: border-box;
					}
				}
				.common-footer {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					.foot-text {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 32rpx;
					}
					.foot-address {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.5);
						line-height: 32rpx;
					}
				}
			}
		}
		
	}
	.custom-callout {
		position: relative;
		width: 440rpx;
		height: 116rpx;
		padding: 16rpx 16rpx 20rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.08);
		border-radius: 12px;
		box-sizing: border-box;
		.callout-title {
			display: block;
			font-weight: 600;
			font-size: 28rpx;
			margin-bottom: 8rpx;
			color: #34314F;
			line-height: 20px;
			text-align: left;
		}
		.callout-content {
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(52, 49, 79, 0.7);
			line-height: 16px;
			text-align: left;
			font-style: normal;
		}
		&::after {
			position: absolute;
			top: 50%;
			right: 20rpx;
			display: block;
			width: 32rpx;
			height: 32rpx;
			transform: translateY(-50%);
			background: url('@/static/images/index/right-arrow.png') no-repeat center;
			background-size: 100% 100%;
			content: '';
		}
	}
	
	.ellipsis {
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 隐藏超出的内容 */
		text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
		max-width: 370rpx; /* 设置最大宽度以限制文本的显示长度 */
	}
</style>